<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css预编译/bb/aa.css">
</head>
<body>
    
     <div id="app">
        <!-- vue $set 的方法 -->
          {{person.name}}
          {{person.age}}
          <button @click="add()">增加</button>
     </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js'></script>
    <script>
        //不在data和methods 里定义的数据将不会被vue劫持
        //vue如果希望后添加的属性也能响应需要用到$set方法
        //vue.$set(目标属性,key,value) =>给vue添加一个响应式属性 vue3废除

        //vue响应对数组的处理
        //Obeject.defineProperty  hack 了数组方法
        //push、unshift、shift、reverse、pop、sort、splice
        //调用上述方法视图就会自动响应
        //为了性能问题 不直接劫持数组
        
        // let arr = ['吃','喝','躺'];
        // arr.forEach((item,index)=>{
        //     Object.defineProperty(arr,index,{
        //         get(){
        //            console.log(item+"被访问了");
        //            return arr[index];
        //         },
        //         set(){ 
        //            console.log(item+"被设置成了"+arr)
        //         }
        //     });
        // })；

        //vue 重写了七个方法
         let vm = new Vue({
            el:"#app",
            data:{
                person:{
                    name:"王大毛"
                }
            },
            methods:{
                 add(){
                    vm.$set(this.person,"age",40)
                 }
            }
         })
    </script>
</body>
</html>